<template>
  <div class="app-container">
    <template>
      <el-alert title="友情提示：消费数据有10分钟延迟，仅统计2022年1月1日后数据！" type="info" />
    </template>
    <div class="filter-container">
      <el-select v-model="channels.adminId" placeholder="所属渠道" clearable class="filter-item"
        style="width: 200px; margin-right: 20px">
        <el-option v-for="item in calendarTypeOptions" :key="item.id" :label="item.nickname" :value="item.id" />
      </el-select>
      <span style="margin-right:20px">
        <el-date-picker v-model="value1" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
          placeholder="注册开始日期" />
      </span>
      <span>
        <el-date-picker v-model="value2" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
          placeholder="注册结束日期" />
      </span>

      <el-input v-model="channels.channelCode" placeholder="推荐码" style="width: 200px; margin-left: 20px"
        class="filter-item" />

      <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 20px"
        @click="handleFilter">
        查询
      </el-button>
    </div>

    <el-table :data="list" stripe style="width: 1200px" border show-summary :summary-method="getSummaries">
      <el-table-column prop="channel_code" label="推荐码" width="100" align="center" />
      <el-table-column prop="channel_name" label="名称" width="200" align="center" />
      <el-table-column prop="adminname" label="所属渠道" align="center">
        <template slot-scope="{ row }">
          {{ row.adminname || "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="new_device" label="新增设备数" align="center" />
      <el-table-column prop="repeat_device" label="重复设备数" align="center" />
      <el-table-column prop="new_last_ip" label="新增IP" align="center" />
      <el-table-column prop="new_user" label="新增账号" align="center" />
      <el-table-column prop="new_money" label="新增消费" align="center" />

    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="channels.pageNo" :limit.sync="channels.pageSize"
      @pagination="handleFilter" />
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import {
    encryption2
  } from '@/api/index'
  export default {
    name: 'ComplexTable',
    components: {
      Pagination
    },
    data() {
      return {
        value1: '',
        value2: '',
        channels: {
          adminId: '', // 上级渠道ID
          channelCode: '', // 推荐码
          pageNo: 1,
          pageSize: 10
        },
        calendarTypeOptions: [],
        total: 0,
        list: [],
        total_count: []
      }
    },
    created() {
      this.handleFilter()
      this.Channel()
    },
    methods: {
      getSummaries(param) {
        const {
          columns,
          data
        } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          } else if (index == 3) {
            sums[index] = this.total_count.total_device_count
          } else if (index == 4) {
            sums[index] = this.total_count.total_repeat_device_count
          } else if (index == 5) {
            sums[index] = this.total_count.total_last_ip
          } else if (index == 6) {
            sums[index] = this.total_count.total_user_count
          } else if (index == 7) {
            sums[index] = this.total_count.total_money
          } else {
            sums[index] = '-'
          }
        })
        return sums
      },
      Channel() {
        const arys = {}
        const url = '/market/singleList'
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.calendarTypeOptions = res.data.result
          } else {
            console.log(res)
          }
        })
      },
      // 查询
      handleFilter() {
        const arys = {
          adminId: this.channels.adminId ? this.channels.adminId : JSON.parse(Cookies.get('userinfo'))
            .admin_id, // 上级渠道ID
          startDate: this.value1 ? this.value1 : '', // 消费开始时间
          endDate: this.value2 ? this.value2 : '', // 消费结束时间

          channelCode: this.channels.channelCode, // 推荐码
          pageNo: this.channels.pageNo,
          pageSize: this.channels.pageSize
        }
        const url = '/market/newStatis'
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.list = res.data.result.list
            this.total = res.data.result.count
            this.total_count = res.data.result.total_count
            this.total_money = res.data.result.total_money
          } else {
            this.$message({
              message: res.data.text,
              type: 'error'
            })
          }
        })
      },
      handleCreate() {
        // console.log('创建推荐码')
        this.$router.push({
          path: '/QueryCode/CreateCode'
        })
      }
    }
  }
</script>
<style scoped>
  .filter-container .filter-item {
    margin-bottom: 0;
  }

  .el-table--border {
    border-right: 1px solid #dfe6ec;
  }

  .el-alert {
    width: 1200px;
  }

  .filter-container {
    margin-top: 20px;
  }
</style>